I'm trying to create a component wrapper for the Vuetify Stepper component. My goal is to simply create a wrapper so that I can apply some CSS overrides.
So I want to pass down all the $attrs, $listeners, $slots.
I don't want to change any behavior/js.
Here is my my-stepper.vue:
<template>
<v-stepper v-bind="$attrs" v-on="$listeners">
<slot></slot>
</v-stepper>
</template>
<script>
export default {
name: "my-stepper",
inheritAttrs: false,
};
</script>
<style lang="scss">
// Fix issue with the vertical stepper component in vuetify
.v-stepper.v-stepper--vertical .v-stepper__content.active > .v-stepper__wrapper {
height: auto !important; // allow the active step to have automatic height (if child change)
padding: 4px; // fix an overflow issue
}
</style>
I use this component like:
<my-stepper vertical v-model="currentStepNumber" elevation="0">...</my-stepper>
But now, when I use my-stepper I got the following error in Chrome:
[Vuetify] [BREAKING] '@input' has been removed, use '@change' instead. For more information, see the upgrade guide https://github.com/vuetifyjs/vuetify/releases/tag/v2.0.0#user-content-upgrade-guide.
This error disappears when I remove the v-on="$listeners" but I need it to pass down the events. Don't I?
Any help or proposal for a simple component wrapper is appreciated.
v-model is just a syntactic sugar for @input + :value.
From the docs: https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components
<input v-model="searchText">
does the same thing as:
<custom-input
v-bind:value="searchText"
v-on:input="searchText = $event"
></custom-input>
I found a valid soution to my issue.
In my wrapper component, in the script section I needed to add a model object to specify the event name (from default being input to change):
export default {
name: "vertical-stepper",
inheritAttrs: false,
model: {
prop: "value",
event: "change",
},
};
</script>
This refers to Customizing the Component v-model in the docs.